<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>运动</title>
    <script src='https://webapi.amap.com/maps?v=2.0&key=68f7d284ec39ccaf7880b0d41926657e'></script>
</head>

<body>
    <!-- 运动中 -->
    <section class="run">
        <p>户外跑</p>
        <p>
            <span>运动中</span>
            <span>
                <a href="#" class="iconfont icon-yinle"></a>
                <a href="#" class="iconfont icon-settings"></a>
            </span>
        </p>
    </section>

    <!-- 公里数 -->
    <main class="km">
        <p>
            <span class="meter">00.00</span>
            公里
        </p>
    </main>

    <!-- GPS定位 -->
    <section class="gps">
        <span>GPS信号度低，数据精准度低</span>
        <span>------------</span>
        <a href="map.html" class="iconfont icon-didiandingwei_o"></a>
    </section>

    <!-- 数据 -->
    <section class="data">
        <div class="top">
            <p>
                <i class="iconfont icon-miaobiao_2"></i>
                配速
                <span class="speed">--</span>
            </p>
            <p>
                <i class="iconfont icon-pc-xuanzeyongshi"></i>
                用时
                <span class="times">00:00:00</span>
            </p>
            <p>
                <i class="iconfont icon-huo"></i>
                千卡
                <span class="kcal">00</span>
            </p>
        </div>
    </section>

    <!-- 暂停、继续、结束按钮 -->
    <section class="button">
        <!-- 暂停 -->
        <div id="pause">
            <p>
                <i class="iconfont icon-zanting"></i>
            </p>
            <p>
                暂停
            </p>
        </div>
        <!-- 锁 -->
        <i class="iconfont icon-suoding"></i>

        <!-- 继续按钮 -->
        <div id="goon">
            <p>
                <i class="iconfont icon-24gf-play"></i>
            </p>
            <p>
                继续
            </p>
        </div>

        <!-- 结束按钮 -->
        <div id="over">
            <p>
                <i class="iconfont icon-jieshu"></i>
            </p>
            <p>
                结束
            </p>
        </div>
    </section>
</body>

</html>